<template>
  <div class="right-bottom-container">
    <el-table
      :data="tableData"
      style="width: 100%; height: 100%;"
      :header-cell-style="headerCellStyle"
      :row-style="rowStyle"
      :cell-style="cellStyle"
      stripe
      class="vehicle-table"
    >
      <!-- <el-table-column prop="index" label="序号" width="80" align="center" /> -->
      <el-table-column prop="plateNumber" label="车牌号" align="center" />
      <el-table-column prop="batteryLevel" label="电量" align="center">
        <template #default="scope">
          <span :style="{ color: getBatteryColor(scope.row.batteryLevel) }">{{ scope.row.batteryLevel }}%</span>
        </template>
      </el-table-column>
      <el-table-column prop="range" label="续航里程" align="center">
        <template #default="scope">
          <span>{{ scope.row.range }}KM</span>
        </template>
      </el-table-column>
      <el-table-column prop="healthValue" label="健康值" align="center">
        <template #default="scope">
          <span :style="{ color: getHealthColor(scope.row.healthValue) }">{{ scope.row.healthValue }}%</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 车辆数据接口
interface VehicleData {
  plateNumber: string
  batteryLevel: number
  range: number
  healthValue: number
}

// 示例车辆数据
const tableData = ref<VehicleData[]>([
  // { index: 1, plateNumber: '京A12345', battery: 85, range: 120, health: 92 },
  // { index: 2, plateNumber: '京B67890', battery: 72, range: 95, health: 88 },
  // { index: 3, plateNumber: '京C11111', battery: 45, range: 60, health: 75 },
  // { index: 4, plateNumber: '京D22222', battery: 90, range: 135, health: 95 },
  // { index: 5, plateNumber: '京E33333', battery: 28, range: 35, health: 65 },
  // { index: 6, plateNumber: '京F44444', battery: 67, range: 85, health: 82 },
  // { index: 7, plateNumber: '京G55555', battery: 93, range: 145, health: 98 },
  // { index: 8, plateNumber: '京H66666', battery: 55, range: 70, health: 78 }
])

// 表格样式配置
const headerCellStyle = {
  background: 'linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%)',
  color: '#ffffff',
  fontWeight: 'bold',
  fontSize: '14px',
  textAlign: 'center',
  borderBottom: '2px solid #1e40af'
}

const rowStyle = {
  backgroundColor: 'transparent'
}

const cellStyle = {
  backgroundColor: 'transparent',
  color: '#e2e8f0',
  fontSize: '13px',
  borderBottom: '1px solid #334155'
}

// 电量颜色判断
const getBatteryColor = (battery: number) => {
  if (battery >= 80) return '#10b981' // 绿色
  if (battery >= 50) return '#f59e0b' // 黄色
  if (battery >= 30) return '#f97316' // 橙色
  return '#ef4444' // 红色
}

// 健康值颜色判断
const getHealthColor = (health: number) => {
  if (health >= 90) return '#10b981' // 绿色
  if (health >= 80) return '#f59e0b' // 黄色
  if (health >= 70) return '#f97316' // 橙色
  return '#ef4444' // 红色
}


const init = (module: any) => {
    console.log(JSON.parse(module))
    tableData.value = JSON.parse(module)
}

defineExpose({
    init
})
</script>

<style scoped lang="less">
.right-bottom-container {
  width: 100%;
  height: 100%;
  padding: 15px;
  box-sizing: border-box;
  background: #1e293b;
  border-radius: 8px;
}

:deep(.vehicle-table) {
  background: transparent;
  
  .el-table__header {
    background: transparent;
    
    th {
      background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%) !important;
      color: #ffffff !important;
      border-bottom: 2px solid #1e40af !important;
    }
  }
  
  .el-table__body {
    background: transparent;
    
    tr {
      background: transparent !important;
      
      &:hover {
        background: rgba(59, 130, 246, 0.1) !important;
      }
      
      &.el-table__row--striped {
        background: rgba(30, 41, 59, 0.3) !important;
        
        &:hover {
          background: rgba(59, 130, 246, 0.15) !important;
        }
      }
    }
    
    td {
      background: transparent !important;
      color: #e2e8f0 !important;
      border-bottom: 1px solid #334155 !important;
    }
  }
  
  // 滚动条样式
  .el-table__body-wrapper {
    &::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }
    
    &::-webkit-scrollbar-track {
      background: rgba(30, 41, 59, 0.3);
      border-radius: 3px;
    }
    
    &::-webkit-scrollbar-thumb {
      background: linear-gradient(135deg, #1e3a8a, #3b82f6);
      border-radius: 3px;
      
      &:hover {
        background: linear-gradient(135deg, #1e40af, #2563eb);
      }
    }
  }
}
:deep(.el-table tr){
  background-color: transparent !important;
}
</style>